<template>
    <div class="map-legend" :class="{ 'collapsed': collapsed }">
        <div class="legend-header" @click="toggleLegend">
            <span class="legend-title">图例</span>
            <i :class="collapsed ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
        </div>
        <div class="legend-content" v-show="!collapsed">
            <div v-for="category in legendCategories" :key="category.name">
                <!-- 处理有child的分类 -->
                <div v-if="category.child && category.child.length > 0">
                    <div class="legend-category-title">{{ category.name }}</div>
                    <div v-for="childCategory in category.child" :key="childCategory.name" 
                         :class="['legend-category', childCategory.items.length === 1 ? 'single-item' : 'single-line']">
                        <!-- 单个item的特殊处理 -->
                        <div v-if="childCategory.items.length === 1" class="legend-single-item">
                            <span class="legend-category-subtitle single">{{ childCategory.name }}</span>
                            <div class="legend-item">
                                <img v-if="childCategory.items[0].icon" 
                                     :src="childCategory.items[0].icon" 
                                     :alt="childCategory.items[0].label" 
                                     class="legend-icon" />
                                <div v-else class="legend-symbol" 
                                     :style="{ backgroundColor: childCategory.items[0].color }"></div>
                                <span class="legend-label">{{ childCategory.items[0].label }}</span>
                            </div>
                        </div>
                        <!-- 多个item的标准处理 -->
                        <div v-else>
                            <div class="legend-category-subtitle">{{ childCategory.name }}</div>
                            <div class="legend-item" v-for="item in childCategory.items" :key="item.id">
                                <img v-if="item.icon" :src="item.icon" :alt="item.label" class="legend-icon" />
                                <div v-else class="legend-symbol" :style="{ backgroundColor: item.color }"></div>
                                <span class="legend-label">{{ item.label }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 处理没有child的分类 -->
                <div v-else :class="['legend-category', category.items.length === 1 ? 'single-item' : 'single-line']">
                    <!-- 单个item的特殊处理 -->
                    <div v-if="category.items.length === 1" class="legend-single-item">
                        <span class="legend-category-title single">{{ category.name }}</span>
                        <div class="legend-item">
                            <img v-if="category.items[0].icon" 
                                 :src="category.items[0].icon" 
                                 :alt="category.items[0].label" 
                                 class="legend-icon" />
                            <div v-else class="legend-symbol" 
                                 :style="{ backgroundColor: category.items[0].color }"></div>
                            <span class="legend-label">{{ category.items[0].label }}</span>
                        </div>
                    </div>
                    <!-- 多个item的标准处理 -->
                    <div v-else>
                        <div class="legend-category-title">{{ category.name }}</div>
                        <div class="legend-item" v-for="item in category.items" :key="item.id">
                            <img v-if="item.icon" :src="item.icon" :alt="item.label" class="legend-icon" />
                            <div v-else class="legend-symbol" :style="{ backgroundColor: item.color }"></div>
                            <span class="legend-label">{{ item.label }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Legend',
    //   props: {
    //     categories: {
    //       type: Array,
    //       default: () => []
    //     }
    //   },
    data() {
        return {
            collapsed: true,
            legendCategories: [
                {
                    name: "自动站",
                    items: [],
                    child: [{
                        name: "国控站",

                        items: [
                            { id: 1, label: "Ⅰ类", icon: require('@/assets/map/water/国控1.png') },
                            { id: 2, label: "Ⅱ类", icon: require('@/assets/map/water/国控2.png') },
                            { id: 3, label: "Ⅲ类", icon: require('@/assets/map/water/国控3.png') },
                            { id: 4, label: "Ⅳ类", icon: require('@/assets/map/water/国控4.png') },
                            { id: 5, label: "Ⅴ类", icon: require('@/assets/map/water/国控5.png') },
                            { id: 6, label: "劣Ⅴ类", icon: require('@/assets/map/water/国控6.png') },
                        ]
                    },
                    {
                        name: "省控站",

                        items: [
                            { id: 7, label: "Ⅰ类", icon: require('@/assets/map/water/省控1.png') },
                            { id: 8, label: "Ⅱ类", icon: require('@/assets/map/water/省控2.png') },
                            { id: 9, label: "Ⅲ类", icon: require('@/assets/map/water/省控3.png') },
                            { id: 10, label: "Ⅳ类", icon: require('@/assets/map/water/省控4.png') },
                            { id: 11, label: "Ⅴ类", icon: require('@/assets/map/water/省控5.png') },
                            { id: 12, label: "劣Ⅴ类", icon: require('@/assets/map/water/省控6.png') },
                        ]
                    },

                    {
                        name: "市控站",

                        items: [
                            { id: 13, label: "Ⅰ类", icon: require('@/assets/map/water/市控1.png') },
                            { id: 14, label: "Ⅱ类", icon: require('@/assets/map/water/市控2.png') },
                            { id: 15, label: "Ⅲ类", icon: require('@/assets/map/water/市控3.png') },
                            { id: 16, label: "Ⅳ类", icon: require('@/assets/map/water/市控4.png') },
                            { id: 17, label: "Ⅴ类", icon: require('@/assets/map/water/市控5.png') },
                            { id: 18, label: "劣Ⅴ类", icon: require('@/assets/map/water/市控6.png') },
                        ]
                    },
                    {
                        name: "县控站",

                        items: [
                            { id: 19, label: "Ⅰ类", icon: require('@/assets/map/water/县控1.png') },
                            { id: 20, label: "Ⅱ类", icon: require('@/assets/map/water/县控2.png') },
                            { id: 21, label: "Ⅲ类", icon: require('@/assets/map/water/县控3.png') },
                            { id: 22, label: "Ⅳ类", icon: require('@/assets/map/water/县控4.png') },
                            { id: 23, label: "Ⅴ类", icon: require('@/assets/map/water/县控5.png') },
                            { id: 24, label: "劣Ⅴ类", icon: require('@/assets/map/water/县控6.png') },
                        ]
                    }
                    ]

                },
                {
                    name: "实验室数据",
                    items: [
                        { id: 25, label: "Ⅰ类", icon: require('@/assets/map/water/一类水质.png') },
                        { id: 26, label: "Ⅱ类", icon: require('@/assets/map/water/二类水质.png') },
                        { id: 27, label: "Ⅲ类", icon: require('@/assets/map/water/三类水质.png') },
                        { id: 28, label: "Ⅳ类", icon: require('@/assets/map/water/四类水质.png') },
                        { id: 29, label: "Ⅴ类", icon: require('@/assets/map/water/五类水质.png') },
                        { id: 30, label: "劣Ⅴ类", icon: require('@/assets/map/water/劣五类水质.png') },
                    ],
                    child: []
                },
                {
                    name: "饮用水源地",
                      items: [
                            { id: 31, label: "Ⅰ类", icon: require('@/assets/map/water/水源站1.png') },
                            { id: 32, label: "Ⅱ类", icon: require('@/assets/map/water/水源站2.png') },
                            { id: 33, label: "Ⅲ类", icon: require('@/assets/map/water/水源站3.png') },
                            { id: 34, label: "Ⅳ类", icon: require('@/assets/map/water/水源站4.png') },
                            { id: 35, label: "Ⅴ类", icon: require('@/assets/map/water/水源站5.png') },
                            { id: 36, label: "劣Ⅴ类", icon: require('@/assets/map/water/水源站6.png') },
                             { id: 37, label: "取水口", icon: require('@/assets/map/water/地表水取水口.png') },
                        ],
                    child: [
                    ]

                },
                {
                    name: "污染源",
                    items: [
                        { id: 38, label: "", icon: require('@/assets/map/pollution/污染源.png') },
                    ],
                    child: []
                },
                  {
                    name: "入河排污口",
                    items: [
                        { id: 39, label: "城镇污水处理厂排污口", icon: require('@/assets/map/paiwukou/城镇污水处理厂排污口.png') },
                        { id: 40, label: "工业排污口", icon: require('@/assets/map/paiwukou/工业排污口.png') },
                        { id: 41, label: "农业排口", icon: require('@/assets/map/paiwukou/农业排口.png') },
                        { id: 42, label: "其他排污口", icon: require('@/assets/map/paiwukou/其他排污口.png') },
                    ],
                    child: []
                },
                     {
                    name: "预警",
                    items: [
                        { id: 43, label: "", icon: require('@/assets/map/warn/warn.png') },
                    ],
                    child: []
                },
            ]
        }
    },
    methods: {
        toggleLegend() {
            this.collapsed = !this.collapsed;
            // this.$emit('toggle', this.collapsed);
        }
    }
}
</script>

<style scoped>
.map-legend {
    position: absolute;
    bottom: 60px;
    left: 20px;
    max-width: 450px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
    /* 移除固定 height */
    min-height: 300px;
    /* 使用 min-height 替代 height */
}

.map-legend.collapsed {
    width: 80px;
    min-height: auto;
    /* 折叠状态下允许自适应高度 */
}

.legend-header {
    padding: 12px 16px;
    background-color: #1890ff;
    color: white;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
}



.legend-content {
    padding: 10px;
    max-height: 400px;
    max-width: 450px;
    overflow-y: auto;
}

.legend-category-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
}

.legend-category-subtitle {
    font-weight: 500;
    font-size: 13px;
    /* color: #666; */
    margin: 8px 0 4px 0;
    width: 100%;
}

.legend-category.single-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.legend-category.single-line .legend-category-title {
    width: 100%;
    margin-bottom: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    /* 减小底部边距 */
}

.legend-category.single-line .legend-item {
    display: inline-flex;
    margin-right: 10px;
    margin-bottom: 8px;
}

.legend-icon {
    width: 24px;
    /* 从原来的 20px 缩小到 24px */
    height: 24px;
    /* 从原来的 20px 缩小到 24px */
    margin-right: 5px;
    /* 减小右边距 */
}

.legend-symbol {
    width: 24px;
    /* 从原来的 20px 缩小到 24px */
    height: 24px;
    /* 从原来的 20px 缩小到 24px */
    border-radius: 4px;
    margin-right: 8px;
    /* 减小右边距 */
    border: 1px solid #ddd;
}

.legend-label {
    font-size: 12px;
    /* 可选：减小字体大小 */
    color: #333;
    flex: 1;
}
.legend-single-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.legend-category-title.single,
.legend-category-subtitle.single {
    font-weight: normal;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
    margin-right: 10px;
    flex-shrink: 0;
}

.legend-single-item .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

/* 滚动条样式 */
.legend-content::-webkit-scrollbar {
    width: 6px;
}

.legend-content::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}
</style>